﻿@page "/heatmap-chart/inversed-axis"

@using Syncfusion.Blazor.HeatMap
@using Syncfusion.Blazor.Buttons
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@using MSComponents = Microsoft.AspNetCore.Components
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the population growth rate of the most populous countries over the years. The data label is disabled in this sample, the Tooltip displays the data point values. </p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to reverse the axis origin for both axes, once the axis origin has been reversed the axis data will be displayed inverted. You can reverse the axis origin by enabling the <code>IsInversed</code> property for each axis.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="control-section">
        <SfHeatMap DataSource="@DataSource">
            <HeatMapTitleSettings Text="Population Growth Rate of the most Populous Countries">
                <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
            </HeatMapTitleSettings>
            <HeatMapXAxis Labels="@XLabels" LabelRotation="45" LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None" IsInversed="@XInverse"></HeatMapXAxis>
            <HeatMapYAxis Labels="@YLabels" IsInversed="@YInverse"></HeatMapYAxis>
            <HeatMapPaletteSettings Type="@SFHeatMap.PaletteType.Gradient">
                <HeatMapPalettes>
                    <HeatMapPalette Value="0" Color="#4b7287"></HeatMapPalette>
                    <HeatMapPalette Value="0.5" Color="#b5b29f"></HeatMapPalette>
                    <HeatMapPalette Value="1" Color="#F0D6AD"></HeatMapPalette>
                    <HeatMapPalette Value="2" Color="#466f86"></HeatMapPalette>
                    <HeatMapPalette Value="2.5" Color="#d7c7a7"></HeatMapPalette>
                    <HeatMapPalette Value="3" Color="#6e888f"></HeatMapPalette>
                </HeatMapPalettes>
            </HeatMapPaletteSettings>
            <HeatMapCellSettings ShowLabel="false"  Format="{value}%">
                <HeatMapCellBorder Width="0"></HeatMapCellBorder>
            </HeatMapCellSettings>
            <HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
        </SfHeatMap>
        <div style="float: right; margin-right: 10px;">
            Source:
            <a href="https://en.wikipedia.org/wiki/List_of_countries_by_oil_production" target="_blank">https://en.wikipedia.org/</a>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div><h5>Properties</h5></div>
    <table id="property" title="Properties" style="width: 100%">
        <tbody>
            <tr style="height: 50px">
                <td style="width: 40%;">
                    <div>
                        <SfCheckBox Label="Reverse X-Axis Origin" ValueChange="ValueXChange" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 40%;">
                    <div>
                        <SfCheckBox Label="Reverse Y-Axis Origin" ValueChange="ValueYChange" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code{
    bool XInverse = false;
    bool YInverse = false;
    string[] XLabels = new string[] { "China", "India", "USA", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Mexico" };
    string[] YLabels = new string[] { "1965-1970", "1970-1975", "1975-1980", "1980-1985", "1985-1990", "1990-1995", "1995-2000", "2000-2005", "2005-2010", "2010-2015" };
    double[,] DataSource = HeatMapData.GetInverseData();
    public void ValueXChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        XInverse = args.Checked;
    }
    public void ValueYChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        YInverse = args.Checked;
    }
}

